<template>
  <div>
    <vxe-modal
      v-model="visible"
      :mask="false"
      :title="`备份文件【${database.dbName}】`"
      destroy-on-close
      esc-closable
      height="500"
      resize
      width="900"
      @close="closeFileList"
    >
      <template #corner>
        <span style="margin: 0 10px">
          <span style="font-size: 14px; font-weight: normal">保留最新</span>
          <vxe-button
            :content="database.maxFileNum || '0'"
            mode="text"
            status="primary"
            style="margin: 0 2px; padding: 0"
            @click="fileCountClick"
          ></vxe-button>
          <span style="font-size: 14px; font-weight: normal">份</span>
        </span>
        <span>
          <vxe-button content="" icon="vxe-icon-refresh" mode="text" @click="refresh"></vxe-button>
        </span>
      </template>
      <template #default>
        <div>
          <vxe-table
            ref="xTable"
            :data="fileList"
            :loading="listLoading"
            :row-config="{ isHover: true }"
            border
            height="430"
            resizable
            show-overflow
            size="small"
          >
            <vxe-column title="序号" type="seq" width="50"></vxe-column>
            <vxe-column field="fileName" min-width="300" title="文件名称"></vxe-column>
            <vxe-column field="size" title="文件大小" width="100"></vxe-column>
            <vxe-column field="backupTime" title="备份时间" width="180"></vxe-column>
            <vxe-column fixed="right" show-overflow title="操作" width="200">
              <template #default="{ row }">
                <a-button type="link" @click="downloadFileClick(row)">下载</a-button>
                <a-button type="link" @click="restoreCheckClick(row)">还原</a-button>
                <a-button type="link" @click="deleteFileClick(row)">删除</a-button>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </template>
    </vxe-modal>
    <fileRestoreModal v-if="restoreModalShow" ref="restoreModalRef" @close="closeRestoreModal()"></fileRestoreModal>
    <vxe-modal v-model="fileCountVisible" esc-closable show-footer width="300">
      <template #title>
        <span>保留最新文件数量</span>
      </template>
      <template #default>
        <vxe-input
          v-model="maxFileNum"
          :max="100"
          :min="1"
          placeholder=""
          style="width: 100%"
          type="integer"
        ></vxe-input>
      </template>
      <template #footer>
        <div style="text-align: center">
          <vxe-button content="保存" status="primary" @click="fileCountClickConfirm"></vxe-button>
        </div>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
import { VXETable } from 'vxe-table/lib/v-x-e-table';
import FileRestoreModal from '@/pages/bdp/sl/dataSecurity/fileRestoreModal.vue';
import { deleteFile, downloadFile, fileCount, getFileList } from '@bdp/sl/dataSecurity/api';

export default {
  components: { FileRestoreModal },
  name: 'FileList',
  data() {
    return {
      ok: true,
      visible: false,
      fileCountVisible: false,
      listLoading: false,
      restoreModalShow: false,
      maxFileNum: 0,
      fileList: [],
      database: {},
      fileData: {},
    };
  },
  created() {},
  methods: {
    init(row) {
      this.visible = true;
      this.database = row;
      this.maxFileNum = row.maxFileNum || 0;
      this.$nextTick(() => {
        this.getFileList();
      });
    },
    // 获取文件列表
    getFileList() {
      this.listLoading = true;
      getFileList(this.database.id).then((res) => {
        if (res.code === 0) {
          this.fileList = res.data;
        }
        this.listLoading = false;
      });
    },
    // 刷新
    refresh() {
      this.getFileList();
    },
    // 还原
    restoreCheckClick(row) {
      this.restoreModalShow = true;
      this.$nextTick(() => {
        this.$refs.restoreModalRef.init({
          ...row,
          dbType: this.database.dbType,
          targetId: this.database.id,
          targetDbName: this.database.dbName,
        });
      });
    },
    // 下载文件
    downloadFileClick(row) {
      downloadFile(row).then((e) => {
        // 创建一个指向 Blob 对象的 URL
        const url = window.URL.createObjectURL(new Blob([e]));

        // 创建一个隐藏的 <a> 标签
        const link = document.createElement('a');
        link.href = url;
        link.download = row.fileName; // 设置下载的文件名
        link.style.display = 'none';

        // 将 <a> 标签添加到文档中
        document.body.appendChild(link);

        // 触发点击事件
        link.click();

        // 清理资源
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
      });
    },
    // 删除文件
    async deleteFileClick(row) {
      const type = await VXETable.modal.confirm('您确认要删除吗？');
      if (type === 'confirm') {
        deleteFile(row).then((res) => {
          if (res.code === 0) {
            VXETable.modal.message({ content: '删除成功', status: 'success' });
            this.getFileList();
          }
        });
      }
    },
    closeFileList() {
      this.$emit('close');
    },
    closeRestoreModal() {
      this.getFileList();
    },
    fileCountClick() {
      this.fileCountVisible = true;
    },
    fileCountClickConfirm() {
      if (this.maxFileNum) {
        fileCount(this.database.id, this.maxFileNum).then((res) => {
          if (res.code === 0) {
            VXETable.modal.message({ content: '保存成功', status: 'success' });
            this.fileCountVisible = false;
            this.database.maxFileNum = this.maxFileNum;
          }
        });
      }
    },
  },
};
</script>
